<!-- 统计区间  -->
<template>
  <div class="rangeArea">
    <div class="container">
      <van-row type="flex" justify="space-between">
        <van-col class="title" span="12">
          <div class="titleIcon"></div>
          <span>统计区间</span>
        </van-col>
        <van-col span="6">
          <select class="month">
            <option value="volvo">本月</option>
            <option value="saab">次月</option>
          </select>
        </van-col>
      </van-row>
      <van-row class="operation" type="flex" justify="space-between">
        <van-col
          span="6"
          v-for="(item, index) in dataList"
          :key="index"
          @click="changeState(index)"
        >
          <div :class="index == currentIndex ? 'item current' : 'item'">
            {{ item.name }}
          </div>
          <div :class="index == currentIndex ? 'number current' : 'number'">
            {{ item.number }}
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
// import BScroll from "better-scroll";
export default {
  name: "rangeArea",
  data() {
    return {
      dataList: [
        { name: "全部", number: "5" },
        { name: "待测评", number: "12" },
        { name: "已测评", number: "7" },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    changeState(index) {
      this.currentIndex = index;
    },
  },
};
</script>
<style lang="less" scoped>
.rangeArea {
  .container {
    width: 3rem;
    height: calc(100% - 0.6rem);
    padding: 0.16rem 0 0.16rem 0.16rem;
    .title {
      .titleIcon {
        display: inline-block;
        width: 0.06rem;
        border-radius: 0.03rem;
        height: 0.2rem;
        background-image: linear-gradient(#ec257b, #d41045);
      }
      span {
        margin-left: 0.1rem;
        color: #5a6b80;
        font-size: 0.16rem;
        vertical-align: top;
      }
    }
    .month {
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid #1fa9da;
      border-radius: 0.02rem;
      color: #1fa9da;
      padding: 0 0.15rem;
      height: 0.22rem;
      text-align: center;
    }
    .operation {
      margin-top: 0.2rem;
      .item {
        font-size: 0.14rem;
        color: #5a6b80;
        letter-spacing: 0;
        font-weight: 800;
        text-align: center;
        font-family: PingFangSC-Medium;
      }
      .number {
        font-family: DINAlternate-Bold;
        font-size: 0.3rem;
        color: #5a6b80;
        letter-spacing: 0;
        text-align: center;
        margin-top: 0.04rem;
      }
      .current {
        color: #d41045;
      }
    }
  }
}
</style>